<template>
    <div class="selectTeam">
        <div class="particles">
            <vue-particles
                color="#cccccc"
                :particleOpacity="0.8"
                :particlesNumber="60"
                shapeType="circle"
                :particleSize="8"
                linesColor="#104783"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="100"
                :moveSpeed="3"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push"
            >
            </vue-particles>
        </div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>请选择学校</span>
            </div>
            <div style="overflow: hidden; height: 300px" v-sc-loading="loading">
                <ul class="infinite-list">
                    <li v-for="(i) in teams" class="infinite-list-item" :key="i.name" @click="selectTeam(i)">{{ i.schoolName }}</li>
                </ul>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import VueParticles from "vue-particles/src/vue-particles/vue-particles.vue";

export default {
    name: "selectTeam",
    components: { VueParticles },
    data() {
        return {
            loading: true,
        };
    },
    created() {
        this.getTeams();
    },
    computed: {
        ...mapGetters(["teams"]),
    },
    methods: {
        // 获取学校列表
        async getTeams() {
            this.loading = true;
            let teams = await this.$store.dispatch("team/getTeams");
            if(teams.length === 1){
                this.selectTeam(teams[0])
            }
            setTimeout(() => {
                this.loading = false;
            }, 1000);
        },
        // 选择学校
        selectTeam({ id, schoolName }) {
            let curr = this.teams.find((v) => v.id == id);
            this.$store.dispatch("team/setCurrTeam", curr);
            const beforePath = sessionStorage.getItem("beforePath"); //之前的页面
            beforePath ? this.$router.push({ path: beforePath }) : this.$router.push({ path: "/" });
            this.$notify({
                title: "当前学校!",
                message: schoolName,
                type: "success", //success, warning, info, error
                duration: 2000,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.selectTeam {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .particles {
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both;
    }

    .box-card {
        width: 480px;
        position: relative;
        z-index: inherit;
    }

    .infinite-list {
        height: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        overflow-y: auto;
    }

    .infinite-list-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        background: #e8f3fe;
        margin: 10px;
        color: #7dbcfc;
        cursor: pointer;
    }
}
</style>